import React, { memo, useEffect } from 'react';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';

import { getRelevantListAction } from "../../store/actionCreators";

import ThemeHeaderPlayer from "@/components/theme-header-player";
import { RelevantWrapper } from "./style";

const PlayRelevant = memo(() => {
  const dispatch = useDispatch();
  const { relevants } = useSelector(state => ({
    relevants: state.getIn(["player", "relevants"])
  }), shallowEqual);

  useEffect(() => {
    dispatch(getRelevantListAction());
  }, [dispatch]);

  return (
    <RelevantWrapper>
      <ThemeHeaderPlayer title="相似歌曲" />

      <div className="relevant">
        {
          relevants.map(item => {
            return (
              <div className="relev-item" key={item.id}>
                <div className="info">
                  <div className="title">
                    <a href="/">{item.name}</a>
                  </div>

                  <div className="artist">
                    <a href="/">{item.artists[0].name}</a>
                  </div>
                </div>

                <div className="operate">
                  <button className="btn sprite_icon3 play"></button>
                  <button className="btn sprite_icon3 add"></button>
                </div>
              </div>
            )
          })
        }
      </div>
    </RelevantWrapper>
  )
})

export default PlayRelevant